<template>
	<rh-wx class="my-detail-exchange-container">
		<view class="top-content flex-between">
			<image class="card-icon" :src="baseData.coverUrl" mode=""></image>
			<text class="label-txt">{{baseData['activityName']}}</text>
			<text class="status-txt">{{baseData['status'] == 1 ? '待兑换' : '已兑换'}}</text>
		</view>
		<view class="dh-content flex-column">
			<text class="dh-label">兑换券码</text>
			<view class="dh-val flex-center">
				<text class="val-txt">{{baseData['cardRollCode']}}</text>
			</view>
			<view v-if="baseData['status'] == 1" class="dh-btn" @click="submit">
				领取兑换码
			</view>
			<view v-else class="dh-btn" @click="copy(baseData['cardRollCode'])">
				复制卡券密码
			</view>
		</view>
		<view class="tc-content" v-if="baseData['serves'] && baseData['serves'].length">
			<view class="tc-label">套餐内容</view>
			<view class="tc-list">
				<view class="item flex-between" v-for="item in baseData['serves']" :key="item">
					<text class="item-txt">{{item}}</text>
				</view>
			</view>
		</view>
		<view class="desc-content" v-if="notes && notes.length">
			<view class="desc-label">活动须知</view>
			<view class="desc-list">
				<view class="item" v-for="str in notes" :key="str">
					{{str}}
				</view>
			</view>
		</view>
		<!-- <rh-submit-btn v-if="baseData['status'] == 1" text="我已兑换" :submit-action="submit"></rh-submit-btn> -->
	</rh-wx>
</template>

<script>
	import {isWechat} from '@/script/wx-premission.js'
	import {getDhjCardDetail, actionDhj} from '@/api/card/index.js'
	export default {
		data() {
			return {
				isWechat: isWechat(),
				routeParams:{},
				baseData: {},
			}
		},	
		computed: {
			notes(){
				let _self = this, {remarks = ''} = (this.baseData.activity || {})
				let arr = (remarks || '').split(/[(\r\n)\r\n]+/), list = []
				arr.forEach((i, idx) => {
					if(i.trim() != ''){
						list.push(i)
					}
				})
				return list
			},
		},
		onLoad(e){
			if(!this.isWechat) return
			let {id = ''} = e, _self = this
			if(!id || id == '') return
			this.routeParams = e
			_self.showWxApp().then(boo => {
				_self.queryCardDetail(id)
			})
		},
		methods: {
			async queryCardDetail(id){
				let _self = this
				await getDhjCardDetail(id).then(res => {
					_self.baseData = res.data
				})
			},
			copy(val){
				let _self = this
				uni.setClipboardData({
					data: val, //	这里是个坑接受字符串类型 value转化为字符串
					success: function () {
						_self.$attention.noIcon('复制成功')
					}
				})
			},
			async submit(){
				let _self = this, {id} = _self.routeParams
				await actionDhj(id).then(res => {
					_self.$attention.noIcon('操作成功')
				})
				await _self.queryCardDetail()
			},
		}

	}
</script>
<style lang="scss" scoped>
	@mixin fontStyle($color, $size, $weight: 500) {
		color: $color;
		font-size: $size;
		font-weight: $weight;
	}
	.my-detail-exchange-container{
		min-height: 100vh;
		background-color: #F4F8F9;
		padding: 0 20rpx;
		.top-content{
			padding-top: 66rpx;
			.card-icon{
				width: 86rpx;
				height: 54rpx;
				border-radius: 6rpx;
				background-color: #fff;
			}
			.label-txt{
				margin-left: 30rpx;
				flex: 1;
				@include fontStyle(#3E3E3E, 32rpx);
			}
			.status-txt{
				@include fontStyle(#D10909, 32rpx);
			}
		}
		.dh-content{
			align-items: center;
			margin-top: 22rpx;
			padding: 20rpx 20rpx 40rpx;
			background-color: #fff;
			border-radius: 12rpx;
			.dh-label{
				width: 100%;
				text-align: left;
				@include fontStyle(#3D3D3D, 32rpx);
			}
			.dh-val{
				margin-top: 52rpx;
				border: 1rpx solid #DDDDDD;
				padding: 20rpx;
				width: 528rpx;
				border-radius: 50rpx;
				.val-txt{
					@include fontStyle(#979797, 32rpx);
				}
			}
			.dh-btn{
				margin-top: 24rpx;
				@include fontStyle(#0003AA, 26rpx);
			}
		}
		.tc-content{
			align-items: center;
			margin-top: 22rpx;
			padding: 20rpx 20rpx 40rpx;
			background-color: #fff;
			border-radius: 12rpx;
			.tc-label{
				@include fontStyle(#3D3D3D, 32rpx);
			}
			.tc-list{
				flex: 1;
				margin-top: 32rpx;
				.item{
					margin-bottom: 26rpx;
					&:last-child{
						margin-bottom: 0;
					}
					.item-txt{
						@include fontStyle(#7F7F7F, 28rpx);
					}
				}
			}
		}
		.desc-content{
			margin-top: 30rpx;
			padding: 0 20rpx 40rpx;
			.desc-label{
				@include fontStyle(#3D3D3D, 32rpx);
			}
			.desc-list{
				margin-top: 32rpx;
				.item{
					margin-bottom: 10rpx;
					text-align: justify;
					@include fontStyle(#3D3D3D, 28rpx);
					&:last-child{
						margin-bottom: 0;
					}
				}
			}
		}
	}
</style>


